<template>
    <div
        class="cashcancel-contnair"
        v-loading="isLoading"
        element-loading-background="rgba(250, 250, 250, 0.7)"
    >
        <!-- 现金分期撤销 -->
        <!-- <el-card shadow="never">
      <div slot="headerss" class="clearfix">
        <span>现金分期撤销</span>
        <el-button style="float: right; padding: 3px 20px;" type="text" @click="showTrial=false">关 闭</el-button>
        </div>-->
        <cardComponent pageTitle="现金分期撤销">
            <template slot="cardBody">
                <el-form
                    :rules="sizeFormRules"
                    ref="sizeformRef"
                    :model="sizeForm"
                    label-width="130px"
                    size="small"
                >
                    <el-row :gutter="25">
                        <el-col :span="7">
                            <el-form-item label="卡号 : " label-width="90px">
                                <el-select v-model="sizeForm.CARDNBR" style="width: 100%;">
                                    <el-option
                                        v-for=" item in cardList_3601"
                                        :value="item.CARDNBR"
                                        :key="item.CARDNBR"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="撤销申请书编号 : " prop="BLTRFREF">
                                <el-input
                                    maxlength="11"
                                    v-model="sizeForm.BLTRFREF"
                                    style="width: 100%;"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="免除撤销手续费 : ">
                                <el-select v-model="sizeForm.CNLFEEYN" style="width: 100%;">
                                    <el-option label="不免除" value></el-option>
                                    <el-option label="免除" value="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-form-item label-width="0">
                        <el-button type="primary" size="small" @click="onTrial('sizeformRef')">撤 销</el-button>
                        <el-button type="primary" size="small" plain @click="onRdyToJump">分期付款申请记录查询</el-button>
                        <!-- <el-button>关 闭</el-button> -->
                    </el-form-item>
                </el-form>

                <!-- </el-card> -->

                <!-- 现金分期撤销详情 -->
                <!-- <el-card shadow="never" v-if="showTrial">
      <div slot="headerss" class="clearfix">
        <span>现金分期撤销详情</span>
      </div>
      <div></div>
                </el-card>-->
            </template>
        </cardComponent>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import cardComponent from '@/components/cardComponent/cardComponent.vue';
import { get_4xxx } from '@/apis/getAPIClass';

export default {
    data() {
        return {
            sizeForm: {
                CARDNBR: '',
                BLTRFREF: '',
                CNLFEEYN: '',
                TRANSCRED: '0',
            },
            sizeFormRules: {
                BLTRFREF: [
                    {
                        required: true,
                        message: '请输入撤销申请书编号！',
                        trigger: 'blur',
                    },
                ],
            },
            showTrial: false,
            showEdit: false,
            isLoading: false,
        };
    },
    mounted() {
        this.onLoadOBJ();
    },
    name: 'cashcancel',
    components: {
        cardComponent,
    },
    computed: {
        ...mapState({
            defaultParams: state => state.common.defaultParams, // 接口默认参数
            cardInfo_3004: state => state.common.cardInfo_3004,
            cardList_3601: state => state.common.cardList_3601,
            pinFlag: state => state.common.pinFlag, // 是否密码检查标志
        }),
    },
    methods: {
        async onLoadOBJ() {
            this.sizeForm.CARDNBR = this.cardInfo_3004.CARDNO;
        },
        onTrial(ref) {
            this.$refs[ref].validate(async (valid) => {
                if (!valid) return false;


                const confirmResult = await this.$confirm(
                    '此操作将现金分期撤销, 是否继续?',
                    '现金分期提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        customClass: 'warning', type: 'warning',
                    },
                ).catch(err => err);
                if (confirmResult !== 'confirm') return this.$message.info('已取消现金分期撤销');
                const appBody_4075 = {
                    CARDNBR: this.sizeForm.CARDNBR || '', // 卡号,
                    PINFLAG: this.pinFlag,
                    OPERTP: '2', // 操作类型0－现金贷款/余额转移申请资料修改,1－现金贷款/余额转移申请,2－现金贷款/余额转移当日撤销,3—现金贷款/余额转移试算
                    BLTRFREF: this.sizeForm.BLTRFREF, // 撤销申请书编号
                    CNLFEEYN: this.sizeForm.CNLFEEYN, // 免除撤销手续费
                    OUTBANKNAME: '', // 申请转入的银行卡银行名称
                    OUTEXP: '', // 申请转入的银行卡卡片有效期
                    OUTFLAG: '', // 申请转移的银行卡类型
                    OUTBANK: '', // 申请转入的银行卡银行行号
                    CALNAME: '', // 申请转入的银行卡持卡人姓名 选填
                    CREDNO: '', // 信用计划编号操作类型为1时填写填写9999，则申请余额转移，其他为现金贷款。
                    LOADFLAG: '', // 放款方式操作类型为1时，申请现金贷款时必填：0：大额现金贷款 1：小额现金贷款，余额转移2：系统外实时放款4:系统内实时放款
                    MPDRTYN: 1,
                    BTYPE: 0,
                };
                const res_4075 = await get_4xxx(
                    '4075',
                    '现金分期撤销',
                    appBody_4075,
                    this,
                );
                if (!res_4075) return false;
                // 数据成功之后
                console.log(res_4075);

                this.$alert(`分期编号:[${res_4075.body.appBody.BLTRFREF}],现金分期撤销成功！`, '现金分期撤销', {
                    confirmButtonText: '确定',
                    center: true,
                    customClass: 'success', type: 'success',
                    showClose: false,

                });
                this.$refs.sizeformRef.resetFields();
                this.showTrial = true;
            });
        },
        onRdyToJump() {
            this.$router.push('/queryServiceClass/InquiryofInstalment');
        },
    },
};
</script>

<style  scoped lang="scss">
.cashcancel-contnair {
    /deep/.el-card__header {
        padding: 8px !important;
    }
    /deep/.form-row {
        width: 100%;
        margin: 0 auto;
        .el-form {
            //   text-align: left;
            margin: 0 auto;
            width: 500px;
            .el-form-item {
                text-align: center;
            }
        }
        .el-select {
            width: 100%;
        }
    }

    .el-form-item {
        text-align: center;
    }
}
</style>
